import {PureComponent} from "react";
import React from "react";
import "../assets/fonts/Icons.css";
import CarRecordComponent from "./CarRecordComponent";
import AlarmComponent from "./AlarmComponent";
import MapComponent from "./MapComponent";
import FeatureComponent from "./FeatureComponent";
import {connect} from "react-redux";
import {queryMonitorAlarmList, queryMonitorCarStatusList} from "../common/ApiUtils";
import {actionCreator} from "./store";

/**
 * 全局监控界面
 */
class GlobalMonitoringComponent extends PureComponent {


    render() {

        return (
            <div style={globalWrapperStyle}>

                <FeatureComponent/>

                <div style={bottomWrapperStyle}>

                    <AlarmComponent/>
                    <MapComponent/>
                    <CarRecordComponent/>
                </div>
            </div>
        );
    }

    componentDidMount() {


        console.log("请求车辆状态接口 开始");
        queryMonitorCarStatusList(-1)
            .then(
                res => {
                    console.log("请求车辆状态接口 结束");
                    console.log(res);
                    if (res.resultStatus) {

                        const cars = res.data
                            .map(v => {
                                v.carStatus = 1; //正常
                                if (v.chargingStatus === 1) {
                                    v.carStatus = 2; //充电中
                                }
                                if (v.alarmStatus === 2) {
                                    v.carStatus = 3; //预警
                                } else if (v.alarmStatus === 0) {
                                    v.carStatus = 4; //告警
                                }
                                v.newTag = v.tagSerial.substr(15, 20);
                                return v;
                            })
                            .filter(v => {
                                return v.onlineStatus === 1;
                            });
                        console.log(cars);

                        this.props.saveCarArrayMessage(cars);

                    }
                }
            )
            .catch(err => {
                    console.log("请求车辆列表出现异常" + err);
                }
            );


        const hours = new Date().setHours(0, 0, 0, 0);
        const beginTime = new Date(hours).format("yyyy-MM-dd hh:mm:ss");

        const date = new Date();
        const endTime = date.format("yyyy-MM-dd hh:mm:ss");

        //alarmState=${alarmState}&beginDate=${beginDate}&endDate=${endDate}
        const params ={
            alarmState:0,
            beginDate:beginTime,
            endDate:endTime,
        };

        console.log("请求报警列表接口 结束");
        queryMonitorAlarmList(params, -1)
            .then((res) => {
                console.log("请求报警列表 结束");
                console.log(res);
                if (res && res.data) {
                        let alarmDate;
                        const carWarningArray = res.data.map(v => {
                            alarmDate = new Date(v.alarmTime);
                            v.alarmTime = alarmDate.format("yyyy/MM/dd hh:mm");
                            return v;
                        });
                        this.props.saveWarningCarArray(carWarningArray);
                    }
                }
            )
    }


}

const mapStatus = (status) => {
    return {};
};

const dispatchStatus = (dispatch) => {
    return {
        saveCarArrayMessage(carArray) {
            const action = actionCreator.saveCarMessageData(carArray);
            dispatch(action);
        },
        saveWarningCarArray(warningCarArray) {
            const action = actionCreator.saveCarWarningData(warningCarArray);
            dispatch(action);
        }
    };
};


export default connect(mapStatus, dispatchStatus)(GlobalMonitoringComponent);


const globalWrapperStyle = {
    borderRadius: 4,
    backgroundColor: "#fff",
    height: '100%',
    paddingBottom: 10,
    display: "flex",
    flexDirection: "column",
};


const bottomWrapperStyle = {
    margin: "0 10px",
    flex: 1,
    display: 'flex',
    minHeight: 400,
};









